<!-- 柱状图 -->
<template>
    <div class="wrap" ref="barRef"></div>
</template>

<script lang='ts' setup>
import { computed, markRaw, onMounted, onUnmounted, ref } from 'vue';
import * as echarts from 'echarts/core';
import {
    GridComponent,
    GridComponentOption,
    LegendComponent,
    LegendComponentOption,
    TitleComponent,
    GraphicComponent
} from 'echarts/components';
import { BarChart, BarSeriesOption } from 'echarts/charts';
import { CanvasRenderer } from 'echarts/renderers';
import { handleResize } from '@/utils/other';

echarts.use([GridComponent, LegendComponent, BarChart, CanvasRenderer, TitleComponent, GraphicComponent]);

type EChartsOption = echarts.ComposeOption<
    GridComponentOption | LegendComponentOption | BarSeriesOption
>;
let barRef = ref()
let chart = ref()
const data: number[] = [];
for (let i = 0; i < 5; ++i) {
    data.push(Math.round(Math.random() * 100));
}

const background: any = {
    "二营长": "#ee6666",
    "嘎子": "#91cc75",
    "马保国": "#5470c6",
    "鸡你太美": "#73c0de",
    "潘子": "#fac858",
}
let year = ref({
    firstYear: 1998,
    lastYear: 2023
})
let yeartext = computed(()=> {
    return year.value.firstYear + '年排行'
} )
const option = ref({
    title: {
        text: yeartext.value,
        left: "50%",
        right: "50%"
    },
    grid: {
        top: 40,
        bottom: 40,
        left: 60,
        right: 80
    },
    xAxis: {
        max: 'dataMax'
    },
    yAxis: {
        type: 'category',
        data: ['二营长', '嘎子', '马保国', '鸡你太美', '潘子'],
        inverse: true,
        animationDuration: 300,
        animationDurationUpdate: 300,
        max: 4
    },
    series: [
        {
            realtimeSort: true,
            seriesLayoutBy: 'column',
            type: 'bar',
            data: data,
            itemStyle: {
                color: function (param: any) {
                    return background[param.name];
                }
            },
            label: {
                show: true,
                position: 'right',
                valueAnimation: true
            }
        }
    ],
    legend: {
        show: true
    },
    animationDuration: 0,
    animationDurationUpdate: 3000,
    animationEasing: 'linear',
    animationEasingUpdate: 'linear',
})
// 动态添加数据
const run = () => {
    for (var i = 0; i < data.length; ++i) {
        if (Math.random() > 0.9) {
            data[i] += Math.round(Math.random() * 300);
        } else {
            data[i] += Math.round(Math.random() * 200);
        }
    }
    
    chart.value.setOption(option.value);
}
const getYear = (time: number) => {
    if (time >= year.value.lastYear) {
        return
    }
    option.value.title.text = yeartext.value
    setTimeout(() => {
        getYear(year.value.firstYear += 1)
        run()
    }, 3000);
}
let flag = ref<boolean>(true)
onMounted(() => {
    chart.value = markRaw(echarts.init(barRef.value))
    chart.value.setOption(option.value)
    
    getYear(year.value.firstYear)

    window.addEventListener('resize', handle)

    chart.value.on('rendered',()=>{
        if (!flag.value) return
        flag.value = false
        setTimeout(() => {
            chart.value.resize()
            handleResize()
        }, 1000)
    })
})

const handle = () => {
    chart.value.resize()
}
onUnmounted(() => {
    window.removeEventListener('resize', handle)
})
</script>

<style scoped>
.wrap {
   overflow: hidden;
}
</style>